<!-- 一期所有样式和js都写入到html中 -->
<!-- eslint-disable -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui,viewport-fit=cover"/>
    <title>逗学教育</title>
    <link rel="stylesheet" href="../../common/css/vant.css" />
    <link rel="stylesheet" href="../../common/css/common.css" />
    <!-- 引入comment组件的样式 -->
    <link rel="stylesheet" href="../../widget/components/comment/index.css" />
    <!-- 引入Aliplayer样式 -->
    <!-- <link rel="stylesheet" href="../../common/css/aliplayer-min.css"> -->
    <link
      rel="stylesheet"
      href="https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css"
    />
    <style>
      /*
			页面的所有css，必须有页面前缀
			如首页，则所有css以 .index- 开头
      */

      /* 折叠栏右边箭头样式 */
      /* 右边箭头的样式 */
      .page-content {
        padding-bottom: 1rem;
      }
      .van-collapse-item__title .van-cell__right-icon::before {
        transform: rotate(0deg);
      }

      .van-collapse-item__title--expanded .van-cell__right-icon::before {
        transform: rotate(90deg);
      }

      .video-course-container {
        position: relative;
        height: 4.21rem;
        width: 100%;
        background-color: rgba(134, 40, 40, 0.2);
      }

      .video-course-container-back {
        position: absolute;
        top: 0.16rem;
        left: 0.24rem;
        height: 0.64rem;
        width: 0.64rem;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.4);
      }

      .video-course-hr {
        height: 0.24rem;
      }
      .video-course-cover {
        height: 100%;
        width: 100%;
      }

      .video-course-cover-video {
        width: 100%;
        height: 100%;
        /* background-color: black; */
      }

      video {
        width: 100%;
        height: 100%;
      }
      /*课程详情页存放课程图片的容器*/
      .video-course-cover-img {
        width: 100%;
        height: 100%;
        /* background-color: black; */
      }
      /* 课程详情页的课程图片 */
      img {
        width: 100%;
        height: 100%;
      }

      .video-course-play-container {
        width: 100%;
        height: 100%;
      }

      /* 选中tab下横线颜色 */
      .van-tabs__wrap {
        border-bottom: 1px solid rgba(200, 200, 200, 0.1);
      }
      .van-tab {
        font-size: 0.32rem;
        color: rgba(3, 3, 3, 1);
      }
      .van-tab--active {
        color: rgba(222, 42, 32, 1) !important;
      }
      .van-tabs__line {
        width: 1.2rem !important;
        height: 0.04rem !important;
        background: rgba(222, 42, 32, 1);
        border-radius: 2px 2px 0px 0px;
      }

      .van-collapse-item__content {
        padding: 0;
      }

      .pre-collapse-item {
        padding: 0.22rem 0.32rem;
      }

      /* 目录样式 */
      /* 单层目录样式 */
      [class*='van-hairline']::after {
        border: none;
      }
      .van-cell:not(:last-child)::after {
        border: none;
      }
      .video-course-one-container {
        height: 0.96rem;
        padding: 0 0.32rem;
        line-height: 0.96rem;
        font-size: 0.3rem;
        color: rgba(51, 51, 51, 1);
        background-color: #fff;
      }
      /* 和节同级的视频样式 */
      .video-course-video {
        height: 0.96rem;
        padding: 0 0.32rem;
        line-height: 0.96rem;
        font-size: 0.3rem;
        color: rgba(51, 51, 51, 1);
      }
      /* 节下面的视频 */
      .video-course-chpater-item {
        padding: 0 0.32rem;
        background-color: #fff;
      }
      .video-course-chpater-item-container {
        height: 0.96rem;
        line-height: 0.96rem;
        font-size: 0.3rem;
        color: rgba(51, 51, 51, 1);
        border-bottom: 1px solid rgba(200, 200, 200, 0.1);
      }
      .van-cell {
        height: 0.96rem;
      }
      .video-course-one-title {
        width: 0;
        height: 100%;
        line-height: 0.9rem;
        font-size: 0.3rem;
        color: rgba(51, 51, 51, 1);
        border-bottom: 1px solid rgba(200, 200, 200, 0.1);
      }

      .video-course-one-history {
        display: inline-block;
        width: 0.84rem;
        height: 0.36rem;
        line-height: 0.36rem;
        margin-right: 0.1rem;
        line-height: 0.35rem;
        vertical-align: 0.04rem;
        text-align: center;
        font-size: 0.24rem;
        color: #fff;
        background-color: rgba(254, 80, 79, 1);
        border-radius: 0.28rem 0.28rem 0.28rem 0;
      }
      /* 课程前面的锁定样式 */
      .video-course-status-icon {
        width: 0.48rem;
        height: 0.48rem;
        vertical-align: -0.12rem;
      }
      .video-course-unraveling {
        vertical-align: -0.08rem;
      }
      .video-course-plus-sign {
        display: inline-block;
        height: 0.48rem;
        width: 0.48rem;
        vertical-align: -0.12rem;
      }
      .video-course-plus-sign img {
        height: 100%;
        width: 100%;
      }
      .van-cell {
        font-size: 0.3rem;
        color: rgba(51, 51, 51, 1);
      }

      .van-collapse-item {
        background-color: #fff;
      }
      .van-collapse-item__title {
        margin: 0 0.32rem;
        border-bottom: 1px solid rgba(200, 200, 200, 0.1);
        width: calc(100% - 0.64rem);
        padding: 0.25rem 0 0 0;
      }

      /* 推荐的样式 */
      .van-row {
        margin: 0;
      }

      .video-course-recommend {
        padding: 0 0.32rem 0rem 0.32rem;
        background-color: #fff;
      }

      .video-course-recommend-title {
        padding: 0.24rem 0;
        font-size: 0.28rem;
        font-weight: 600;
        color: rgba(3, 3, 3, 1);
      }

      .video-course-recommend-container {
        padding-bottom: 0.24rem;
      }

      .video-course-recommend-row {
        height: 1.54rem;
      }
      .video-course-left-img {
        width: 2.74rem;
        margin-right: 0.37rem;
      }
      .video-course-left-img img {
        width: 100%;
        height: 100%;
      }
      .video-course-recommend-course-title {
        width: 3.59rem;
        margin-bottom: 0.14rem;
        font-size: 0.26rem;
        color: rgba(51, 51, 51, 1);
      }
      .video-course-recommend-slogan {
        width: 3.59rem;
        height: 0.35rem;
        font-size: 0.26rem;
        color: rgba(222, 42, 32, 1);
      }
      .video-course-details-container {
        background-color: #fff;
      }
      .video-course-recommend-details {
        margin-top: 0.3rem;
        text-align: right;
        font-size: 0.24rem;
        color: rgba(51, 51, 51, 1);
      }

      /* 详情下面的样式 */
      .video-course-details-title {
        padding: 0.33rem 0.32rem 0;
        font-size: 0.32rem;
        font-weight: bold;
        color: rgba(3, 3, 3, 1);
        background-color: #fff;
      }
      .video-course-details-information {
        padding: 0.56rem 0.32rem 0.47rem;
        background-color: #fff;
        align-items: center;
      }
      .video-course-details-price {
        font-size: 0.32rem;
        color: rgba(254, 80, 79, 1);
      }
      .video-course-details-oldPrice {
        /* display: none; */
        font-size: 0.24rem;
        color: rgba(157, 157, 157, 1);
        text-decoration: line-through;
      }
      .video-course-details-person {
        font-size: 0.24rem;
        color: rgba(157, 157, 157, 1);
      }
      .video-course-details-numicon {
        width: 0.4rem;
        height: 0.4rem;
        vertical-align: -0.08rem;
      }
      .video-course-details {
        padding: 0.2rem;
        font-size: 0.35rem;
      }
      .video-course-details-remark {
        padding: 0.2rem;
      }

      /* 防止固定的脚部遮挡内容 */
      /*      .van-tab__pane {
        padding-bottom: 1.8rem;
      }*/

      /* 固定再下面的footer样式 */
      .video-course-footer-buy {
        height: 0.98rem;
        width: 2.2rem;
        line-height: 0.98rem;
      }

      /* 视频样式 */
      .video-course-play-container {
        position: relative;
      }
      video {
        position: absolute;
        top: 0;
        left: 0;
      }
      /* bottom样式 */
      .page-bottom {
        height: 0.98rem;
        box-shadow: 0 0 0.2rem 0 rgba(200, 200, 200, 0.5);
      }
      .page-bottom-comtainer {
        height: 100%;
        align-items: center;
        padding-left: 0.32rem;
        font-size: 0.24rem;
        color: rgba(51, 51, 51, 1);
      }

      .page-bottom-gethandoutsbox{
        width: 2.4rem;
        height: 0.8rem;
        position: absolute;
        left: 0.32rem;
        top: -0.8rem;
        background-image: url('./image/videoCourse/getBackground.png');
        background-size: 2.4rem 0.8rem;
        text-align: center;
        font-size: 0.3rem;
        color: #fff;
        line-height: 0.56rem;
      }
      .page-bottom-gethandoutsclose{
        width: 0.4rem;
        height: 0.4rem;
        position: absolute;
        right: -0.06rem;
        top: -0.06rem;
      }
      .video-course-bottom-kefu {
        width: 0.48rem;
        height: 0.48rem;
      }
      .van-button {
        height: 100%;
        width: 2.86rem;
        font-size: 0.3rem;
        border-radius: unset;
      }
      /* 评论的样式 */
      .van-list__finished-text {
        background-color: #fff;
      }

      /* 目录后面试听两字 */
      .video-course-mulu-try {
        display: inline-block !important;
      }
			
			.rate-container{
				display: flex;
			}
			.rate-item.active {
				color: red;
			}
			.rate-item {
				
			}
    </style>
  </head>

  <body>
    <div id="app" v-cloak>
      <!--**************************************************** 头 **************************************************** -->
      <div class="page-top">
        <div class="flex-wrap flex-justify-between flex-center-wrap header">
          <div class="header-row" @click="goBack">
            <img
              class="header-row-img"
              src="../../common/image/back.png"
              alt=""
            />
          </div>
          <div class="flex header-title">课程资料</div>
          <div class="header-right" @click="goHelp">帮助</div>
        </div>
      </div>

      <!--**************************************************** 内容 *****************************************************-->
      <div class="page-content">
        <div class="placeholder"></div>
        <!-- loading页面 -->
        <div v-if="isShowZLLoading" class="zl-loading">
          <img
            class="zl-loading-img"
            src="../../common/image/white.png"
            alt=""
          />
        </div>
        <!-- @click="changeShowState"只是为了展示 -->
        <div class="video-course-container" @click="changeShowState">
          <div v-if="!isPlayVideo" class="video-course-cover">
            <div v-if="isShowCoverVideo" class="video-course-cover-video">
              <video ref="test" :src="coverUrl"></video>
            </div>
            <div v-else class="video-course-cover-img">
              <img :src="coverUrl" />
            </div>
          </div>
          <div v-else class="video-course-play-container">
            <video ref="test" height="100%" width="100%" controls autoplay>
              <!--  -->
              <source :src="videoUrl2" />
							<source :src="videoUrl1" />
            </video>
          </div>
        </div>
				<div class="rate-wrap" style="display: flex;align-items: center;justify-content: center;">
					<span class="rate-title" style="width: 50px;">倍速</span>
					<span class="rate-container" style="display: flex;">
						<span class="rate-item"
						 style="display: flex;align-items: center;justify-content: center;width: 50px;height: 30px;"
						 v-for="(rateItem,rateIndex) in rateList" :key="rateList"
						:class="{active: rateItem === rate}"
						@click.stop="changeRate(rateItem,rateIndex)">{{rateItem}}</span>
					</span>
				</div>
        <!-- 目录 详情 评论 选择 -->
        <van-tabs
          v-if="isComplete"
          v-model="tabsActive"
          line-width="33%"
          title-active-color="rgba(88,184,241,1)"
        >
          <van-tab v-if="isShowTable">
            <div slot="title">
              <div>
                目录<span v-if="muluTry" class="video-course-mulu-try"
                  >(试听)</span
                >
              </div>
            </div>
            <!-- 一级折叠栏 -->
            <!-- 目录下的推荐 -->
            <div class="video-course-recommend">
              <p
                v-if="recommendCourse.length>0"
                class="video-course-recommend-title"
              >
                推荐配套
              </p>
              <div
                class="video-course-recommend-container"
                v-for="(item, index) of recommendCourse"
                :key="index"
              >
                <div class="video-course-recommend-row">
                  <div class="flex-wrap" @click="goToDeTails(item.id)">
                    <div class="video-course-left-img">
                      <div>
                        <img :src="item.coverurl" alt="加载失败" />
                      </div>
                    </div>
                    <div class="flex video-course-recommend-right">
                      <p class="video-course-recommend-course-title text-ess-1">
                        {{ item.title }}
                      </p>
                      <p class="video-course-recommend-slogan text-ess-1">
                        {{ item.remark }}
                      </p>
                      <div class="video-course-recommend-details">
                        <a>查看详情</a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="video-course-hr bg-color"></div>

            <!-- 折叠目录 折叠目录 折叠目录 折叠目录-->
            <div>
              <van-collapse v-model="firstActiveName" accordion>
                <div v-for="(item, index) of courseData.chapters">
                  <div v-if="item.chaptername">
                    <van-collapse-item :name="index" :key="index">
                      <div slot="title">
                        {{ item.chaptername }}
                        <span
                          v-show="item.isCanListen && courseData.buystate==0 && courseIsFree==0"
                          class="video-course-one-history"
                          >试听
                        </span>
                      </div>
                      <div>
                        <!-- 这是章下面的内容 可能是节也可能是和节同级的视频 -->
                        <van-collapse v-model="secondActiveName" accordion>
                          <!-- 这是节 -->
                          <div
                            v-for="(item2, index2) of item.crds"
                            :key="index2"
                          >
                            <div v-if="item2.chaptername">
                              <van-collapse-item>
                                <div slot="title">
                                  <span class="video-course-plus-sign">
                                    <img
                                      src="./image/videoCourse/add.png"
                                      alt=""
                                    />
                                  </span>
                                  {{ item2.chaptername }}
                                  <span
                                    v-show="item2.isCanListen && courseData.buystate==0 && courseIsFree==0"
                                    class="video-course-one-history"
                                    >试听</span
                                  >
                                </div>
                                <div
                                  v-for="(item3, index3) of item2.crds"
                                  :key="index3"
                                  class="video-course-chpater-item"
                                >
                                  <div
                                    class="video-course-chpater-item-container"
                                    @click="playVideo(item3)"
                                  >
                                    <div>
                                      <!-- 能观看 购买了  -->
                                      <span v-if="buyState === 1">
                                        <img
                                          class="video-course-status-icon video-course-unraveling"
                                          src="./image/videoCourse/canUse.png"
                                          alt=""
                                        />
                                      </span>
                                      <!-- 可以试听 或者免费 -->
                                      <span
                                        v-else-if="item3.freetrial === 1 || showState === 2"
                                      >
                                        <img
                                          class="video-course-status-icon"
                                          src="./image/videoCourse/play.png"
                                          alt=""
                                        />
                                      </span>
                                      <!-- 不能观看 未购买 不免费 不能试听 -->
                                      <span
                                        v-else-if="item3.freetrial === 0 && showState === 1"
                                      >
                                        <img
                                          class="video-course-status-icon"
                                          src="./image/videoCourse/notUse.png"
                                          alt=""
                                        />
                                      </span>
                                      <span
                                        v-if="false"
                                        class="video-course-one-history"
                                        >上次观看</span
                                      >
                                      {{ item3.title }}
                                    </div>
                                  </div>
                                </div>
                              </van-collapse-item>
                            </div>
                            <div v-else>
                              <div
                                class="video-course-video"
                                @click="playVideo(item2)"
                              >
                                <!-- 能观看 购买了  -->
                                <span v-if="buyState === 1">
                                  <img
                                    class="video-course-status-icon video-course-unraveling"
                                    src="./image/videoCourse/canUse.png"
                                    alt=""
                                  />
                                </span>
                                <!-- 可以试听 或者免费 -->
                                <span
                                  v-else-if="item2.freetrial === 1 || showState === 2"
                                >
                                  <img
                                    class="video-course-status-icon"
                                    src="./image/videoCourse/play.png"
                                    alt=""
                                  />
                                </span>
                                <!-- 不能观看 未购买 不免费 不能试听 -->
                                <span
                                  v-else-if="item2.freetrial === 0 && showState === 1"
                                >
                                  <img
                                    class="video-course-status-icon"
                                    src="./image/videoCourse/notUse.png"
                                    alt=""
                                  />
                                </span>
                                <span
                                  v-if="false"
                                  class="video-course-one-history"
                                  >上次观看</span
                                >
                                {{ item2.title }}
                              </div>
                            </div>
                          </div>
                        </van-collapse>
                      </div>
                    </van-collapse-item>
                  </div>
                  <div v-else>
                    <div
                      class="flex-wrap flex-center-wrap video-course-one-container video-course-common-font-color"
                      @click="playVideo(item)"
                    >
                      <div class="flex video-course-one-title">
                        <div class="flex-wrap flex-center-wrap">
                          <div>
                            <!-- 能观看 购买了 -->
                            <span v-if="buyState === 1">
                              <img
                                class="video-course-status-icon video-course-unraveling"
                                src="./image/videoCourse/canUse.png"
                                alt=""
                              />
                            </span>
                            <!-- 可以试听 或者免费 -->
                            <span
                              v-else-if="item.freetrial === 1 || showState === 2"
                            >
                              <img
                                class="video-course-status-icon"
                                src="./image/videoCourse/play.png"
                                alt=""
                              />
                            </span>
                            <!-- 不能观看 未购买 不免费 不能试听 -->
                            <span
                              v-else-if="item.freetrial === 0 && showState === 1"
                            >
                              <img
                                class="video-course-status-icon"
                                src="./image/videoCourse/notUse.png"
                                alt=""
                              />
                            </span>
                          </div>
                          <div>
                            <span v-if="false" class="video-course-one-history"
                              >上次观看</span
                            ><span class="video-course-updateyear"
                              >{{ item.updateyear }}</span
                            >
                            {{ item.title }}
                          </div>
                          <div v-if="false">00:03</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </van-collapse>
            </div>
          </van-tab>
          <van-tab title="详情">
            <div class="video-course-details-title font">
              {{ courseData.title }}
            </div>
            <div
              class="video-course-details-information flex-wrap flex-justify-between"
            >
              <div>
                <span class="video-course-details-price"
                  >￥{{ courseData.price }}</span
                >
                <span
                  v-if="courseData.goodsprice>0"
                  class="video-course-details-oldPrice"
                  >￥{{ courseData.goodsprice }}</span
                >
              </div>
              <div
                v-if="courseData.trueviews>0"
                class="video-course-details-person"
              >
                <img
                  class="video-course-details-numicon"
                  src="./image/videoCourse/personNum.png"
                  alt=""
                />
                {{ courseData.views }}
              </div>
            </div>
            <div class="video-course-hr bg-color"></div>
            <div class="video-course-details-container">
              <div
                v-html="courseData.desc"
                class="video-course-details-remark"
              ></div>
            </div>
          </van-tab>
          <van-tab>
            <div slot="title">
              <div>
                评论
              </div>
            </div>
            <!-- 评论下的推荐 -->
            <div class="video-course-recommend">
              <p
                v-if="recommendCourse.length>0"
                class="video-course-recommend-title"
              >
                推荐配套
              </p>
              <div
                class="video-course-recommend-container"
                v-for="(item, index) of recommendCourse"
                :key="index"
              >
                <div class="video-course-recommend-row">
                  <div class="flex-wrap" @click="goToDeTails(item.id)">
                    <div class="video-course-left-img">
                      <div>
                        <img :src="item.coverurl" alt="加载失败" />
                      </div>
                    </div>
                    <div class="flex video-course-recommend-right">
                      <p class="video-course-recommend-course-title text-ess-1">
                        {{ item.title }}
                      </p>
                      <p class="video-course-recommend-slogan text-ess-1">
                        {{ item.remark }}
                      </p>
                      <div class="video-course-recommend-details">
                        <a>查看详情</a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="video-course-hr bg-color"></div>
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
            >
              <van-cell v-for="(item, index) of comments.list" :key="index" />
              <zl-comment :item="item"></zl-comment>
            </van-list>
          </van-tab>
        </van-tabs>
      </div>

      <!--************************************* 脚 ***********************************-->
      <div class="page-bottom">
        <div class="flex-wrap flex-justify-between page-bottom-comtainer">
          <!-- 客服 -->
          <div @click="goService(courseData.cateid)">
            <img
              src="./image/videoCourse/service.png"
              alt=""
              class="video-course-bottom-kefu"
            />
            <p>客服</p>
          </div>
          <!-- 付款激活 -->
          <div>
            <van-button
              type="danger"
              class="video-course-footer-buy"
              v-if="showState===1"
              @click="goBuy"
              >付款激活
            </van-button>
            <van-button
              type="warning"
              class="video-course-footer-buy"
              v-if="showState===3"
              @click="goComment"
              >评价
            </van-button>
            <van-button
              type="default"
              color="#aaa"
              class="video-course-footer-buy"
              v-if="showState===4"
              :disabled="true"
              >已评价</van-button
            >
            <van-button
              type="default"
              color="#aaa"
              class="video-course-footer-buy"
              v-if="showState===100000"
              >给好友学
            </van-button>
          </div>
          <!-- 领取讲义 -->
          <div v-if='isShowHandouts' class="page-bottom-gethandoutsbox">
            <p @click="getHandouts" style="height: 100%;line-height: 0.6rem;">领取讲义</p>
            <img @click="closeHandouts" class="page-bottom-gethandoutsclose" src="./image/videoCourse/close.png" alt="">
          </div>
        </div>
      </div>
    </div>

    <script src="../../common/js/common.js"></script>
    <script src="../../common/js/vue.min.js"></script>
    <script src="../../common/js/vant.min.js"></script>
    <script src="../../common/js/http.js"></script>
    <script src="../../common/js/utils.js"></script>
    <!-- 引入Aliplayer播放器 -->
    <!-- <script src="../../common/js/aliplayer-h5-min.js"></script> -->
    <!-- <script src="https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-h5-min.js"></script> -->
    <script src="../../widget/service/course.service.js"></script>
    <script src="../../widget/service/user.service.js"></script>
    <script src="../../widget/components/comment/index.js"></script>
    <script>
      // 注册 Lazyload 组件
      Vue.use(vant.Lazyload)
      // 注册 Image 组件
      Vue.use(vant.Button)
      // 注册 Tabs 组件
      Vue.use(vant.Tab).use(vant.Tabs)
      //  注册 Collapse 组件
      Vue.use(vant.Collapse).use(vant.CollapseItem)
      //  注册 Layout 组件
      Vue.use(vant.Row).use(vant.Col)
      //  注册 Rate 组件
      Vue.use(vant.Rate)
      //  注册 List 组件
      Vue.use(vant.List)
      Vue.use(vant.Toast)

      // 调用函数式组件
      // vant.Toast('提示');

      new Vue({
        el: '#app',
        components: {
          'zl-comment': comment
        },
        data: {
          // 课程id  TODO: 现在是默认的 以后要改变
          id: 18,
          tabsActive: 0,
          firstActiveName: '',
          secondActiveName: '',
          loading: false,
          // 评论是否加载完成
          finished: false,
          // 整个数据
          courseData: {},
          // 是课程则不显示目录
          isShowTable: true,
          // 是否请求数据结束
          isComplete: false,
          // 购买状态 购买的优先级比免费的优先级更高 如果购买了后视频免费 则显示购买的状态 从来没购买的人则显示给好友学
          buyState: Number,
          // 课程是否评论
          isComment: Number,
          // 是否免费
          courseIsFree: Number,
          // 是否有试听视频 如果课程免费也不显示试听
          isHaveAudition: false,
          // 封面图片或视频的地址
          coverUrl: '',
          isShowCoverVideo: true,
          // 评论
          comments: {},
          // 浏览人数
          viewNum: '',
          // 推荐课程数据
          recommendCourse: [],
          // 评论页数
          pageNum: 2,
          chapterList: [],
          videoList: [],
          // 是否播放视频
          isPlayVideo: false,
          videoUrl1: '',
          videoUrl2: '',
          isShowZLLoading: true,
          //是否显示领取讲义的按钮
          isShowHandouts:true,
					// 当前速度
					rate:'1.0',
					// 速度选择
					rateList:['2.0','1.5','1.2','1.0','0.8']
        },
        computed: {
          // 进行课程状态判断
          showState() {
            // 未购买
            if (this.buyState === 0) {
              // 不免费
              if (this.courseIsFree === 0) {
                return 1
              }
              // 免费
              if (this.courseIsFree === 1) {
                return 2
              }
            }
            // 已购买
            if (this.buyState === 1) {
              // 未评价
              if (this.isComment === 0) {
                return 3
              }
              // 已评价
              if (this.isComment === 1) {
                return 4
              }
            }
          },
          // 是否显示目录后面的试听两字
          muluTry() {
            if (
              this.buyState === 0 &&
              this.courseIsFree === 0 &&
              this.isHaveAudition
            ) {
              return true
            } else {
              return false
            }
          }
        },
        methods: {
					changeRate(item,index) {
						if (! this.$refs.test) {
							this.$toast('请先播放视频')
							return 
						}
						this.rate = item
						this.$refs.test.pause()
						this.$refs.test.playbackRate = this.rate
						this.$refs.test.play()
					},
          // 头部 返回按钮事件
          goBack() {
            window.history.back(-1)
          },
          // 头部 帮助按钮事件
          goHelp() {
            window.location.href = '../personCenter/help.html'
          },
          //脚部 领取讲义
          getHandouts(){
            this.goService(this.courseData.cateid);
          },
          //脚部 关闭领取讲义入口
          closeHandouts(){
            this.isShowHandouts = false;
            let dateNow = Date.now();
            let record = [];
            let course = {//course存下当前课程的时间信息
              id:this.id,
              time:dateNow
            }
            try{//从本地获取之前存下的record
              record = JSON.parse(localStorage.getItem('record')) || []
            }
            catch(err){
              record = []
            }
            if(!(record && record.length)){
              record.push(course)
            }
            else{
              for(let item of record){
                if(item.id === this.id){
                  item.time = dateNow
                  localStorage.setItem('record',JSON.stringify(record));
                  return 
                }
              }
              record.push(course)
            }
            localStorage.setItem('record',JSON.stringify(record));
          },
          //脚部 判断isShowHandouts的真假
          getIsShowHandouts(){
            const sevenDays = 7 * 24 * 60 * 60 * 1000;//七天的毫秒数
            // const sevenDays = 20 * 1000;//七天的毫秒数
            //获取当前时间的时间戳
            let timeNow = Date.now();

            let record = [];
            try{
              record = JSON.parse(localStorage.getItem('record')) || []
            }
            catch(err){
              record = []
            }

            if(!(record && record.length)) return true

            for(let item of record){
              if(item.id === this.id){
                return (timeNow-item.time)>sevenDays;
              }
            }
            return true
          },
          // 脚部 客服按钮事件
          goService(cateid) {
            window.location.href = `../personCenter/customerService.html?cateid=${cateid}`
          },
          // 脚部 激活按钮事件
          goBuy() {
            // 先调用生成订单接口 获取订单id
            userService.createdOrder({ courseid: this.id }).then(res => {
              if (!res.code) {
                // 再转到订单详情页面
                window.location.href = `../personCenter/pay.html?orderid=${res.orderid}`
              } else {
                this.$toast(`${res.message}`)
              }
            })
          },
          // 脚部 评价按钮事件
          goComment() {
            window.location.href = `../personCenter/comment.html?courseid=${this.id}`
          },
          // 加载更多评价条数事件
          onLoad() {
            if (this.pageNum === 0) {
              this.loading = false
              this.finished = true
              return
            }
            const getComment = {
              id: this.id,
              page: this.pageNum
            }
            // 获取评论
            courseService.getCourseComment(getComment).then(res => {
              this.pageNum = res.meta.next_page
              this.comments.list = this.comments.list.concat(res.data)
              this.loading = false
              if (Number(res.meta.next_page) === 0) {
                this.finished = true
              }
            })
          },
          changeShowState() {
            this.showState = 2
          },
          // 查看详情
          goToDeTails(id) {
            location.href = `./videoCourse.html?courseid=${id}`
          },
          // 播放视频
          playVideo(video) {
						console.log(video.freetrial)
            if (
              Number(video.freetrial) === 0 &&
              this.buyState === 0 &&
              this.courseIsFree === 0
            ) {
              this.$toast('请激活后观看')
              return
            }
            courseService
              .getVideoUrl({
                videoid: video.videoid,
                courseid: this.courseData.id
              })
              .then(res => {
                if (res.code) {
                  this.$toast(res.message)
                  return
                }
                try {
                  this.videoUrl1 = res[0].PlayURL
                } catch (err) {}
                try {
                  this.videoUrl2 = res[1].PlayURL
                } catch (err) {}
                this.isPlayVideo = true
                this.$nextTick(function() {
                  this.$refs.test.autoplay = true
                  this.$refs.test.load()
									this.$refs.test.playbackRate = this.rate
                  document.getElementsByClassName(
                    'page-content'
                  )[0].scrollTop = 0
                })
              })
          }
        },
        created() {
          // TODO : 根据传参进行请求
          const queryObj = utils.getQuery(location.href)
          // TODO: id还是死的
          this.id = queryObj.courseid
          // 根据存在localstorage中数据判断是否显示领取讲义的入口
          this.isShowHandouts = this.getIsShowHandouts();
          //  请求目录数据
          courseService.getCourseDetails({ id: this.id }).then(res => {
            this.courseData = res
						console.log(this.courseData)
						if (this.courseData.code == 400) {
							this.$toast('课程已失效')
							setTimeout(() => {
								this.goBack()
							},600)
						}
            this.isShowZLLoading = false
            this.buyState = Number(res.buystate)
            this.courseIsFree = Number(res.courseisfree)
            this.isComment = Number(res.iscomment)
            // 评论数据
            this.comments = res.comments
            this.pageNum = res.comments.next_page
            // 推荐课程数据
            this.recommendCourse = res.recommend_course
            // 为课程则不显示目录栏
            if (Number(res.coursetype) === 2 || Number(res.coursetype) === 3) {
              this.isShowTable = false
            }
            this.isComplete = true
            // 浏览人数
            // if (res.views > 9999) {
            //   this.viewNum = (res.views / 10000).toFixed(2) + 'w'
            // } else {
            //   this.viewNum = res.views
            // }
            if (res.videourl) {
              this.coverUrl = res.videourl
            } else {
              this.isShowCoverVideo = false
              this.coverUrl = res.coverurl
            }

            // 遍历chapter
            // let chapterList = []
            // let videoList = []
            res.chapters.forEach((value, index, array) => {
              // 进行是否支持试听及试听两个字是否显示判断
              if (value.chaptername) {
                // chapterList.push(value)
                // 一级折叠
                value.crds.forEach((value2, index2, array2) => {
                  // 二级折叠
                  if (value2.chaptername) {
                    // 三级目录 --视频
                    value2.crds.forEach((value3, index3, array3) => {
                      if (value3.freetrial === 1) {
                        array3[index3].isCanListen = true
                        array2[index2].isCanListen = true
                        array[index].isCanListen = true
                        this.isHaveAudition = true
                      } else {
                        // value2.isCanListen = false 此处不应该覆盖已有试听样式
                      }
                    })
                  } else {
                    // 二级折叠同级的视频
                    if (value2.freetrial === 1) {
                      value2.isCanListen = true
                      array2[index2].isCanListen = true
                      array[index].isCanListen = true
                      this.isHaveAudition = true
                    } else {
                      // value2.isCanListen = false 此处不应该覆盖已有试听样式
                    }
                  }
                })
              } else {
                // videoList.push(value)
                // 直接是视频 没有折叠结构
                if (value.freetrial === 1) {
                  this.isHaveAudition = true
                }
              }
            })
            // this.chapterList = chapterList
            // this.videoList = videoList
          })
        }
      })
    </script>
  </body>
</html>

